<template>
  <div class="pf-form-config pf-bgwhite pf-p-10">
    <div class="pf-mt-20 pf-text-left">
      <el-button icon="Refresh" @click="select"></el-button>
      <el-button type="primary" @click="create">创建</el-button>
      <!--      <el-button type="primary" @click="setCache">重置缓存</el-button>-->
      <el-button @click="del">删除</el-button>
      <!--      <el-button @click="initData">init</el-button>-->
    </div>
    <pf-table
      class="pf-mt-20"
      :config="formConfig"
      :data="formList"
      :page-param="pageParam"
      @page-size-change="pageSizeChange"
      @page-change="pageChange"
      @current-page-change="pageChange"
    >
      <el-table-column label="操作" fixed="right" width="80">
        <template #default="scope">
          <el-tooltip effect="light" placement="left" trigger="hover">
            <component :is="'Menu'" class="el-button--text" style="width: 18px"></component>
            <template #content>
              <div class="pf-flex pf-flex-column pf-flex-0">
                <el-button @click="handleClick(scope.row, 'edit')" link type="primary" size="mini"
                  >编辑</el-button
                >
              </div>
            </template>
          </el-tooltip>
        </template>
      </el-table-column>
    </pf-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref } from 'vue';
import { useNotice } from '@/components/element-plus/notice';
import { systemApi } from '@/constants/api/system-api';
import router from '@/router';
// import { init } from "@/views/page-config/form/init-basedata";
import {
  emptyTable,
  FormModel,
  ResponseCodeEnum,
  TableModel,
  useData,
  useHttpClient
} from 'pf-component';
import { TableNameEnum } from '@/constants/enum/table-name.enum';

export default defineComponent({
  name: 'FormConfig',
  setup() {
    const { message } = useNotice();
    const formConfig: Ref<TableModel> = ref(emptyTable);
    const formList: Ref<any[]> = ref([]);
    const show: Ref<boolean> = ref(false);
    const pageParam: any = reactive({ total: 0, pageSize: 10, pageNum: 1 });
    const select = () => {
      useHttpClient()
        .general<any>(systemApi.formConfigApi.list, undefined, pageParam)
        .then(res => {
          if (res.code === ResponseCodeEnum.SUCCESS) {
            const pageData = res.data;
            formList.value = pageData.records;
            pageParam.total = pageData.total;
          } else {
            message.error(res.message);
          }
        });
    };
    const pageChange = (val: number) => {
      pageParam.pageNum = val;
      select();
    };
    const pageSizeChange = (val: number) => {
      pageParam.pageSize = val;
      select();
    };
    /*const setCache = () => {
    };*/
    const create = () => {
      router.push({ path: '/create-form-config' });
    };
    const del = () => {
      // systemApi.dictApi.delete
      // TODO
      message.error('待完善');
    };
    const handleClick = (data: FormModel, cmd: string) => {
      switch (cmd) {
        case 'edit':
          if (data.name) {
            router.push({ path: '/create-form-config', query: { name: data.name } });
          }
          break;
        case 'preview':
          break;
        default:
          message.error('未定义的操作！');
      }
    };
    onMounted(() => {
      useData()
        .loadTable([{ name: TableNameEnum.sysForm, config: formConfig }])
        .then(res => {
          if (res) {
            formConfig.value.checkbox();
            select();
          }
        });
    });
    /*const initData = () => {
      init();
    };*/
    return {
      select,
      formList,
      formConfig,
      handleClick,
      create,
      del,
      // setCache,
      show,
      pageParam,
      pageChange,
      pageSizeChange

      // initData
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
  &-form-config {
  }
}
</style>
